$(function() {
    /*
     *First start 
     **/
    $('#collectf').hide();
    $("#msuit").hide();
    $("#attakf").hide();
    $("#pickupf").hide();
    $("#defencef").hide();
    $("#stopattackf").hide();
    $("#gfield2").hide();
    $("#startf").hide();
    var usercacrds = new Array();
    var ctable = 1;
    var removecards = document.getElementsByClassName('back');
    for (var i = 0; i < removecards.length; i++) {
        element[i].addEventListener("click", function() {
            ctable = ctable - 1;
        }, false);
    }

    var hirank = function(str) {
//        if (str != null && str != "") {
        // var cards = str;
        var a = parseInt(str);
        switch (a) {
            case 11:
                str = str.replace(11, "V");
                break;
            case 12:
                str = str.replace(12, "D");
                break;
            case 13:
                str = str.replace(13, "K");
                break;
            case 14:
                str = str.replace(14, "A");
                break;
        }//end switch 
        return str;
        //}
    };
    //remove last element from string
    var nodecode = function(str) {
        if (str != null) {
            var qwe = str.toString();
            qwe = qwe.slice(0, -1);
            return qwe;
        }
    };
    var forloop = function(data, action) {
        if (data != null) {
            var str = data.toString();
            //var qwe =  data.toString();

            // alert(hirank(data[i].toString()));
            var cards = hirank(str);

            if (data.indexOf("hear") > -1 || data.indexOf("diam") > -1) {
                // cards = cards.replace(/\[\"|\"]/g,''); 
                return     $('#ucard').append('<div class="red"> <a class="' + action + '" id="' + cards + '" rel="' + cards + '" href="#">' + cards + '; </a></div>');
            } else {

                return  $('#ucard').append('<div class="black"><a class="' + action + '" id="' + cards + '" rel="' + cards + '" href="#">' + cards + '; </a></div>');
            }
        }
    };

    function  gameTable() {
        $('#pccard').empty();
        $('#gfield').empty();
        $('#ucard').empty();
        $('#pccard').empty();
        $('#msuit').empty();
        $("#attakf").hide();
        $("#atacbut").hide();

        $.post('game/gameTable', function(data) {
            if (data == "start") {
                $("#attackf").hide();
                $("#startf").show();
            }
            ///DIPLAYS the MASTER CARD
            var b = data[0].mastercard;
            var q = hirank(b);
            $("#msuit").show();
            if (q.indexOf("hear") > -1 || q.indexOf("diam") > -1) {

                $('#msuit').append('<div  id="gray"></div><div id="mys" class="red">' + q + ';</div>');
            } else {
                $('#msuit').append('<div  id="gray"></div><div id="mys" class="black">' + q + ';</div>');

            }  //alert("master =" + data[0].mastercard);
            // alert("action=  " + data[0].action);
            //  
            //PCC CARDS
            for (i = 0; i < parseInt(data[0].opponqty); i++) {
                $('#pccard').append('<div class="pcards"></div>');

            }
            opcards = data[0].opponentattack;
            opcards = hirank(opcards);
            // alert(data[0].opponentattack);
            if (data[0].opponentattack != "1" && data[0].opponentattack != "") {
                if (opcards.indexOf("hear") > -1 || opcards.indexOf("diam") > -1) {
                    $('#gfield').append('<div  class="red">' + opcards + ';</div>');

                } else {
                    $('#gfield').append('<div  class="black">' + opcards + ';</div>');

                }
            }

            //var qw = new Array();
            //display The URDSSER CARDS
            for (i = 1; i < data.length; i++) {
                forloop(data[i].usercard, data[0].action);
                // alert(i + " =" + data[i].usercard);

            }
           // alert(data[0].action);
            if (data != null) {
                var a = data[0].action;
                //  alert(data[0].mastercard);
                switch (a) {

                    case "start":
                        $("#startf").show('slow');
                        alert("start");
                        break;
                    case  "attack":

                        alert(8 + " attack");
                        //alert(data[0].mastercard);
                        break;
                    case  "uattack":

                        alert(7 + " uattack");
                        //alert(data[0].mastercard);
                        break;
                    case "pickup":
                        alert("pickup");
                        $("#pickupf").show();
                        break;
                    case  "defence":
                        alert("defence");
                        $("#defencef").show();
                        break;
                }//end s
            }
            return false;
        }, 'json');
    }
    gameTable();
    Array.prototype.remove = function(arr) {
        this.splice(this.indexOf(arr) == -1 ? this.length : this.indexOf(arr), 1);
    }

    /*
     * START events  
     */
    $('.back').live('click', function() {
        // for the apend chilred object to var  
        var qwe = $(this).parent();
        //alert(qwe);
        // and now we can  apend 
        $("#ucard").append(qwe);
        //back class name 
        $("#ucard a:link").attr("class", "attak");
        var rem = $(this).attr('rel');
        //remove from hidden_attak cartvalue
        $('#hidden_attak').val($('#hidden_attak').val().replace(rem + ",", ""));
        alert(usercacrds);
        // usercacrds = usercacrds.replace(/,,/g, ',');

        var coo = usercacrds.remove(rem);
        alert(coo);

        ctable = ctable - 1;
    });
    $('.uattack').live('click', function() {
// >gamecards && gamestatus === "d
        if (ctable > 1000) {///gamecards && gamestatus === "d

            alert("remove cards from table or press ");
        } else {
            $("#gfield2").show();
//alert("gamecards "+ga;//mecards);
            ctable = ctable + 1;
            delItem = $(this);
            var id = $(this).attr('rel');
            // alert( ctable );
            $("#atacbut").show();
            //$("#pickup").show();



            var atk = $(this).parent();
            // and now we can  apend 
            $("#gfield2").append(atk);
            //back class name 
            $("#gfield2 a:link").attr("class", "back");

            // var moo = $('#pickupcard').attr("value");
            //take th evalue from #pickupcard 
            var moon = $('#pickupcard').val();
            //alert("moon-> " + moon);

            // alert(usercacrds);
            var newpick;
            if (moon != "") {

                //  usercacrds.push(moon);

                newpick = moon + id + ",";
            } else {
                newpick = id + ",";
            }
            //$('#hidden_attak').val($(this).attr('rel'));       
            $('#hidden_attak').val(newpick);

            //pass this value to hidden form 
            $('#pickupcard').val(newpick);
            //chenge classs name in gfield2
            $("#gfield2 a:link").attr("class", "back");
            // $("#gfield2").html($(this).clone());
            //.removeAttr("href")
        }

        return false;
    });
    $('.attack').live('click', function() {
// >gamecards && gamestatus === "d
        if (ctable > 1000) {///gamecards && gamestatus === "d

            alert("remove cards from table or press ");
        } else {
            $("#gfield2").show();
//alert("gamecards "+ga;//mecards);
            ctable = ctable + 1;
            delItem = $(this);
            var id = $(this).attr('rel');
            // alert( ctable );
            $("#atacbut").show();
            //$("#pickup").show();



            var atk = $(this).parent();
            // and now we can  apend 
            $("#gfield2").append(atk);
            //back class name 
            $("#gfield2 a:link").attr("class", "back");

            // var moo = $('#pickupcard').attr("value");
            //take th evalue from #pickupcard 
            var moon = $('#pickupcard').val();
            //alert("moon-> " + moon);

            // alert(usercacrds);
            var newpick;
            if (moon != "") {

                //  usercacrds.push(moon);

                newpick = moon + id + ",";
            } else {
                newpick = id + ",";
            }
            //$('#hidden_attak').val($(this).attr('rel'));       
            $('#hidden_attak').val(newpick);

            //pass this value to hidden form 
            $('#pickupcard').val(newpick);
            //chenge classs name in gfield2
            $("#gfield2 a:link").attr("class", "back");
            // $("#gfield2").html($(this).clone());
            //.removeAttr("href")
        }

        return false;
    });
    $('#startf').submit(function() {
        // var url = $(this).attr('action');
        //    var addcard = $(this).serialize();
        var action = 'start';
        var addcard = '';

        $.post('game/eventsAjax', {'action': action, 'ids': addcard}, function(o) {

            $("#startf").hide('slow');

        }, 'json');
        gameTable();

        return false;
    });
    $('#attackf').submit(function() {
        // var url = $(this).attr('action');
        //    var addcard = $(this).serialize();
        var action = 'uattack';
        var addcard = $('#pickupcard').val();
        addcard = addcard.replace(/\,/g, '","');


        $.post('game/eventsAjax', {'action': action, 'ids': addcard}, function(o) {

            $("#startf").hide('slow');

        }, 'json');
        $('#pccard').empty();
        $('#gfield').empty();
        $('#ucard').empty();
        $('#pccard').empty();
        $('#msuit').empty();
        //$('#gfield2').empty();


        gameTable();

        return false;
    });
    $('#defencef').submit(function() {
        //gameTable();
        // $('#gfield2').empty();
    });

});